<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./js/vue.min.js"></script>
    <title>计算属性的复杂使用</title>
</head>
<body>
<div id="app">
    <h2>总价格：{{totalPrice}}</h2>
</div>
</body>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            books:[
                {id:110,name:"JavaScript从入门到入土",price:119},
                {id:111,name:"Java从入门到放弃",price:80},
                {id:112,name:"编码艺术",price:99},
                {id:113,name:"代码大全",price:150},
            ]
        },
        computed:{
            totalPrice:function(){
                let result = 0;
                for(let i=0;i<this.books.length;i++){
                    result += this.books[i].price;
                }
                return result;
            }
            //上下两种写法等价
            /*totalPrice(){
                let result = 0;
                for(let i=0;i<this.books.length;i++){
                    result += this.books[i].price;
                }
                return result;
            }*/
        },

    })
</script>
</html>